<template>
  <custom-modal-page :visible.sync="visible">
    <div
      class="detail-container animate__faster animate__animated animate__fadeIn"
    >
      <div class="zhgd-data-report-header" :header="title">
        <div class="status-wrap">
          当前状态：
          <div class="status status-no" v-if="dealStatus == 0">未处理</div>
          <div class="status status-ok" v-if="dealStatus == 1">已处理</div>
          <div class="status" v-if="dealStatus == 2">已闭合</div>
        </div>
        <a-button
          v-if="title == '详情'"
          type="primary"
          class="back-button"
          @click="goBack()"
        >
          返回
        </a-button>
      </div>
      <div class="detail-body">
        <a-collapse v-model="activeKey">
          <a-collapse-panel key="1" :show-arrow="false">
            <!-- 自定义头部左边 -->
            <template slot="header">
              <div @click.stop class="customize-text" header="试验信息"></div>
            </template>
            <!-- 自定义头部右边边 -->
            <template slot="extra">
              <div class="customize-extra">
                {{ activeKey.includes("1") ? "收起" : "展开" }}
                <div
                  class="icon"
                  :class="[activeKey.includes('1') && 'active']"
                >
                  <bj-icon-font type="xl" color="#0068B7" :size="10">
                  </bj-icon-font>
                </div>
              </div>
            </template>
            <!-- 表格一 -->
            <vxe-table
              class="scrollbarStyle"
              align="center"
              :data="reportData"
              :column-config="{ resizable: true }"
            >
              <vxe-column title="工程部位" min-width="200">
                <template slot-scope="scope">
                  <span>
                    {{ scope.row.pierName }}
                    {{ scope.row.otherLocation }}
                  </span>
                </template>
              </vxe-column>
              <vxe-column
                field="judgeBasis"
                title="判定依据"
                min-width="150"
              ></vxe-column>
              <vxe-column field="produceDate" title="制件日期" min-width="200">
              </vxe-column>
              <vxe-column
                field="strengthGrade"
                title="设计强度"
                min-width="200"
              >
              </vxe-column>
              <vxe-column
                field="size"
                title="试件尺寸"
                min-width="200"
              ></vxe-column>
            </vxe-table>
          </a-collapse-panel>
          <a-collapse-panel key="2" :show-arrow="false">
            <!-- 自定义头部左边 -->
            <template slot="header">
              <div @click.stop class="customize-text" header="预警信息"></div>
            </template>
            <!-- 自定义头部右边边 -->
            <template slot="extra">
              <div class="customize-extra">
                {{ activeKey.includes("2") ? "收起" : "展开" }}
                <div
                  class="icon"
                  :class="[activeKey.includes('2') && 'active']"
                >
                  <bj-icon-font type="xl" color="#0068B7" :size="10">
                  </bj-icon-font>
                </div>
              </div>
            </template>
            <vxe-table
              border
              class="scrollbarStyle"
              align="center"
              :data="warningData"
              :column-config="{ resizable: true }"
            >
              <vxe-column
                field="trialName"
                title="试验项目"
                min-width="200"
              ></vxe-column>
              <vxe-column field="curingAge" title="养护龄期" min-width="200">
              </vxe-column>
              <vxe-column
                field="trialUnit"
                title="单位"
                min-width="200"
              ></vxe-column>
              <vxe-column
                field="standardValue"
                title="技术指标"
                min-width="150"
              ></vxe-column>
              <vxe-column
                field="testValue"
                title="实测结果"
                min-width="150"
              ></vxe-column>
              <vxe-column field="trialDate" title="检测时间" min-width="200">
              </vxe-column>
              <vxe-column field="result" title="结果判定" min-width="150">
                <template #default="{ row }">
                  <div class="result result-ok" v-if="row.result == 0">
                    合格
                  </div>
                  <div class="result result-no" v-if="row.result == 1">
                    不合格
                  </div>
                  <div class="result result-invalid" v-if="row.result == 2">
                    试验数据无效
                  </div>
                  <div class="result" v-if="row.result == -1">实测</div>
                </template>
              </vxe-column>
              <vxe-column field="operate" title="操作" min-width="150">
                <template #default="{ row }">
                  <div class="text-button-group">
                    <a-button
                      type="link"
                      @click="detail(row)"
                      v-if="row.dataSource == 1"
                      >查看</a-button
                    >
                  </div>
                </template></vxe-column
              >
            </vxe-table>
            <div class="warning-people">
              <div class="label">预警人员：</div>
              <div class="value">{{ warnUser || "暂无预警人员" }}</div>
            </div>
          </a-collapse-panel>
          <a-collapse-panel
            key="3"
            :show-arrow="false"
            v-if="disposalList.length > 0"
          >
            <!-- 自定义头部左边 -->
            <template slot="header">
              <div
                @click.stop
                class="customize-text"
                header="处理及审批信息"
              ></div>
            </template>
            <!-- 自定义头部右边边 -->
            <template slot="extra">
              <div class="customize-extra">
                {{ activeKey.includes("3") ? "收起" : "展开" }}
                <div
                  class="icon"
                  :class="[activeKey.includes('3') && 'active']"
                >
                  <bj-icon-font type="xl" color="#0068B7" :size="10">
                  </bj-icon-font>
                </div>
              </div>
            </template>
            <div class="workflow-process">
              <div class="flex" v-for="(v, i) in disposalList" :key="i">
                <div class="process-time">{{ v.createTime }}</div>
                <div class="flex flex-direction dotsList">
                  <div class="flex flex-direction align-center flex-1">
                    <div
                      class="dots flex flex-direction justify-center align-center activied"
                    ></div>
                    <div
                      :class="i != disposalList.length - 1 ? 'lines' : ''"
                    ></div>
                  </div>
                </div>
                <div class="flex-1" style="padding-bottom: 40px">
                  <div style="margin-bottom: 10px">
                    <span class="process-name">{{ v.createName }}</span>
                    <span class="process-explain">{{
                      v.reason ? "预警处理" : "预警闭合"
                    }}</span>
                  </div>
                  <div class="process-container">
                    {{
                      v.reason
                        ? "预警原因：" + v.reason
                        : v.status == 0
                        ? "审批结果：闭合"
                        : "审批结果：驳回"
                    }}
                  </div>
                  <div class="process-container">
                    {{
                      v.reason
                        ? "预警措施：" + v.disposalOpinion
                        : "审批意见：" + v.disposalOpinion
                    }}
                  </div>
                  <div
                    class="process-container file-download-list"
                    v-if="v.reason && v.fileList.length > 0"
                  >
                    <div class="file-name" @click="viewFile(v.fileList[0])">
                      <a-icon type="paper-clip" style="margin-right: 5px" />
                      <div class="file-name-text">
                        {{ v.fileList[0].realFileName }}
                      </div>
                    </div>
                    <div style="margin-left: 8px">
                      <span class="size-color" style="margin-right: 8px">
                        {{ sizeTostr(v.fileList[0].fileSize) }}
                      </span>
                      <a-icon
                        type="download"
                        class="download-icon"
                        @click="downLoadFile(v.fileList[0])"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-collapse-panel>
          <a-collapse-panel key="4" :show-arrow="false" v-if="title != '详情'">
            <!-- 自定义头部左边 -->
            <template slot="header">
              <div
                @click.stop
                class="customize-text"
                :header="title == '处理' ? '预警处理' : '预警闭合'"
              ></div>
            </template>
            <!-- 自定义头部右边边 -->
            <template slot="extra">
              <div class="customize-extra">
                {{ activeKey.includes("4") ? "收起" : "展开" }}
                <div
                  class="icon"
                  :class="[activeKey.includes('4') && 'active']"
                >
                  <bj-icon-font type="xl" color="#0068B7" :size="10">
                  </bj-icon-font>
                </div>
              </div>
            </template>
            <div class="form-content">
              <a-row :gutter="20" v-if="title == '处理'">
                <a-form-model ref="form" :model="form">
                  <a-col :xs="24" :sm="24" :md="24">
                    <a-form-model-item
                      label="预警原因："
                      prop="reason"
                      :rules="[{ required: true, message: '请填写预警原因' }]"
                    >
                      <a-input
                        type="textarea"
                        placeholder="请填写预警原因"
                        v-model="form.reason"
                        :maxLength="200"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :xs="24" :sm="24" :md="24">
                    <a-form-model-item
                      label="处置措施："
                      prop="desc"
                      :rules="[{ required: true, message: '请填写处理措施' }]"
                    >
                      <a-input
                        type="textarea"
                        placeholder="请填写处理措施"
                        v-model="form.desc"
                        :maxLength="200"
                      />
                    </a-form-model-item>
                  </a-col>
                  <a-col :xs="24" :sm="24" :md="24">
                    <a-form-model-item label="处理内容：" prop="fileList">
                      <input
                        @change="fileChange"
                        type="file"
                        ref="upload"
                        id="upload"
                        style="display: none"
                      />
                      <a-button
                        type="primary"
                        @click="fileUpload"
                        v-if="fileList.length == 0"
                        >点击上传</a-button
                      >
                      <!-- 新增、编辑 -->
                      <div class="file-name-type" v-if="fileList.length > 0">
                        <div v-for="(item, index) in fileList" :key="index">
                          <div
                            class="file-list"
                            @mouseover="mouseOver(item, index)"
                            @mouseleave="mouseLeave(item, index)"
                          >
                            <div class="file-name">
                              <a-icon
                                :type="item.iconType"
                                style="margin-right: 5px"
                              />
                              <div class="file-name-text">
                                {{ item.name }}
                              </div>
                            </div>
                            <div style="margin-left: 8px">
                              <span class="size-color">{{
                                sizeTostr(item.size)
                              }}</span>
                              <a-icon
                                v-show="!item.checkd"
                                type="check"
                                class="check-icon"
                              />
                              <a-icon
                                v-show="item.checkd"
                                type="close-circle"
                                class="close-icon"
                                @click="fileDelete(index, item)"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </a-form-model-item>
                  </a-col>
                </a-form-model>
              </a-row>
              <a-row :gutter="20" v-if="title == '闭合'">
                <a-form-model ref="closeForm" :model="closeForm">
                  <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
                    <a-form-model-item
                      label="审批结果:"
                      prop="status"
                      :rules="[
                        {
                          required: true,
                          message: '请选择审批结果',
                          trigger: 'change',
                        },
                      ]"
                    >
                      <a-radio-group v-model="closeForm.status">
                        <a-radio value="0">闭合</a-radio>
                        <a-radio value="1">驳回</a-radio>
                      </a-radio-group>
                    </a-form-model-item>
                  </a-col>
                  <a-col :xs="24" :sm="24" :md="24">
                    <a-form-model-item label="审批意见">
                      <a-input
                        v-model="closeForm.desc"
                        placeholder="请填写审批意见"
                        type="textarea"
                      />
                    </a-form-model-item>
                  </a-col>
                </a-form-model>
              </a-row>
              <div class="modal-footer">
                <a-button type="primary" class="back-button" @click="goBack()"
                  >取消</a-button
                >
                <a-button
                  type="primary"
                  @click="submit()"
                  :loading="submitLoading"
                  >确定</a-button
                >
              </div>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </div>
      <detail-model
        :visible.sync="modalVisible"
        :modalTrialNum="modalTrialNum"
        :id="modalId"
      >
      </detail-model>
    </div>
  </custom-modal-page>
</template>
<script>
import { notificationTip } from "@/utils";
import {
  dataDetail,
  commissionDetail,
  getDisposalDetail,
  saveDisposal,
  saveClose,
} from "@/api/wisdom-beam/trial-app";
import DetailModel from "../../testDetection/components/DetailModel.vue";
import { kkFileView } from "@/utils";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    pId: {
      type: [String, Number],
      default: "",
    },
    reId: {
      type: [String, Number],
      default: "",
    },
    parentNum: {
      type: [String, Number],
      default: "",
    },
    trialNum: {
      type: [String, Number],
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
  },
  components: {
    DetailModel,
  },
  data() {
    return {
      id: "",
      reportId: "",
      componentName: "",
      dealStatus: "",
      activeKey: ["1", "2", "3", "4"],
      reportData: [],
      table: [],
      warningData: [],
      componentName: "",
      disposalList: [],
      tableData: [],
      form: {
        reason: "",
        desc: "",
      },
      closeForm: {
        status: "",
        desc: "",
      },
      warnUser: "",
      //附件
      fileList: [],
      fileIds: [], //更新时已上传文件剩下的文件id
      // 弹窗
      modalVisible: false,
      modalTrialNum: "",
      modalId: "",
      submitLoading: false,
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          let { pId, reId, parentNum } = this;
          this.id = pId;
          this.reportId = reId;
          this.componentName = parentNum;
          this.getData();
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    //附件预览
    viewFile(file) {
      let { fileUrl } = file;
      window.open(kkFileView(fileUrl));
    },
    //附件下载
    downLoadFile(file) {
      let { fileUrl, realFileName } = file;
      window.open(fileUrl + "&filename=" + realFileName, "_blank");
    },
    //详情
    detail(row) {
      this.modalVisible = true;
      this.modalId = row.id;
      this.modalTrialNum = row.trialNum;
    },
    submit() {
      if (this.title == "处理") {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            this.submitLoading = true;
            let formdata = new FormData();
            if (this.fileList.length > 0) {
              formdata.append("file", this.fileList[0].file);
            } else {
              formdata.append("file", "");
            }
            formdata.append("warningRecordId", this.id);
            formdata.append("reason", this.form.reason);
            formdata.append("disposalOpinion", this.form.desc);
            formdata.append("status", 0);
            saveDisposal(formdata)
              .then((res) => {
                notificationTip("success", "操作成功!");
                this.$refs.form.resetFields();
                this.goBack();
                this.$parent.getTableData();
              })
              .finally((err) => {
                this.submitLoading = false;
              });
          }
        });
      } else if (this.title == "闭合") {
        this.$refs.closeForm.validate(async (valid) => {
          if (valid) {
            this.submitLoading = true;
            let formdata = new FormData();
            formdata.append("warningRecordId", this.id);
            formdata.append("disposalOpinion", this.closeForm.desc);
            formdata.append("status", this.closeForm.status);
            saveClose(formdata)
              .then((res) => {
                notificationTip("success", "操作成功!");
                this.$refs.closeForm.resetFields();
                this.goBack();
                this.$parent.getTableData();
              })
              .finally((err) => {
                this.submitLoading = false;
              });
          }
        });
      }
      return;
    },
    //查询页面数据
    getData() {
      this.loading = true;
      Promise.all([
        this.reportDetail(),
        this.dataDetail(),
        this.getDisposalDetail(),
      ]).finally((_) => {
        this.loading = false;
      });
    },
    // 查看预警处理记录
    getDisposalDetail() {
      getDisposalDetail({
        warnRecordId: this.id,
        type: 1,
      })
        .then((res) => {
          this.disposalList = res.data.result || [];
        })
        .catch((_) => {});
    },
    // 数据详情（预警信息）
    dataDetail() {
      new Promise((resolve, reject) => {
        dataDetail({
          id: this.id,
        })
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.warningData = [];
            this.dealStatus = result.dealStatus;
            this.warnUser = result.warnUser;
            this.warningData.push(result);
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },
    // 报告详情（试验信息）
    reportDetail() {
      new Promise((resolve, reject) => {
        commissionDetail(this.reportId)
          .then((res) => {
            let {
              data: { result },
            } = res;
            this.table = [];
            this.reportData = [];
            this.reportData.push(result);
            resolve();
          })
          .catch((_) => {
            reject();
          });
      });
    },

    //文件上传
    fileUpload() {
      this.$refs.upload.click();
    },
    fileChange(event) {
      this.fileList.unshift({
        file: event.target.files[0],
        name: event.target.files[0].name,
        size: event.target.files[0].size,
        checkd: false,
        iconType: "loading",
      });
      setTimeout(() => {
        this.fileList[0].iconType = "paper-clip";
        event.target.value = "";
      }, 500);
    },

    //文件删除
    fileDelete(i, item) {
      this.fileList.splice(i, 1);
      if (item.id) {
        this.fileIds.push(item.id);
      }
    },

    // 移入
    mouseOver(item, index) {
      item.checkd = true;
    },
    // 移出
    mouseLeave(item, index) {
      item.checkd = false;
    },
    //文件大小转换
    sizeTostr(size) {
      var data = "";
      data = (size / 1024).toFixed(2) + "kb";
      var sizestr = data + "";
      var len = sizestr.indexOf("\.");
      var dec = sizestr.substr(len + 1, 2);
      if (dec == "00") {
        //当小数点后为00时 去掉小数部分
        return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
      }
      return sizestr;
    },
    goBack() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="less" scoped>
.detail-container {
  height: 100%;
  .custom-scrollbar();
  margin: 10px;
  .zhgd-data-report-header {
    &::before {
      content: attr(header);
      height: 18px;
      display: flex;
      align-items: center;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      margin-bottom: 20px;
      font-size: 18px;
      font-weight: 400;
      color: #525a5d;
      position: relative;
      top: 10px;
    }
    padding: 7px 10px;
    .status-wrap {
      flex: 1;
      .flex();
      align-items: center;
      margin-left: 24px;
      .status {
        width: 60px;
        height: 26px;
        background: #4bc964;
        border-radius: 2px;
        text-align: center;
        line-height: 26px;
        color: #fff;
      }
      .status-no {
        background: #ff993f;
      }
      .status-ok {
        background: #0098ff;
      }
    }
  }
  .back-button {
    background: #f1f2f7;
    color: var(--primary-color);
    border: 0;
  }
  .detail-body {
    //折叠面板
    /deep/.ant-collapse {
      border-top: 2px solid #f3f4f6;
      .ant-collapse-content-box {
        padding: 0;
        .base-content {
          padding: 0 130px 20px 0;
        }
        .contract-content {
          padding-bottom: 55px;
          .ant-table-fixed {
            border: 1px solid #dcdee2;
            border-bottom: 0;
          }
        }
      }
    }

    .warning-table {
      /deep/.vxe-header--row {
        background: #fff;
      }
      .result-ok {
        color: #4bc964;
      }
      .result-no {
        color: #ff3f4a;
      }
      .result-invalid {
        color: #0098ff;
      }
    }
    .warning-people {
      margin: 24px 0 40px 0;
      .flex();
      align-items: center;
      padding-right: 148px;
      .label {
        width: 170px;
        text-align: right;
      }
      .value {
        flex: 1;
        height: 36px;
        background: #f3f4f6;
        border-radius: 4px;
        padding-left: 10px;
        line-height: 36px;
      }
    }
    .flex {
      .flex();
    }
    .flex-1 {
      flex: 1;
    }
    .flex-direction {
      flex-direction: column;
    }
    .justify-center {
      justify-content: center;
    }
    .align-center {
      align-items: center;
    }
    .flex-reverse {
      flex-direction: row-reverse;
    }
    .justify-normal {
      justify-content: normal;
    }
    //审批流程
    .workflow-process {
      padding-left: 75px;
      padding-right: 148px;
      overflow: hidden;
      .process-time {
        min-width: 100px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 22px;
        flex-shrink: 0;
      }
      .dotsList {
        margin: 0px 10px;
        margin-top: 3px;
        .lines {
          width: 1px;
          flex: 1;
          min-height: 50px;
          background-color: #d9dce2;
          margin-top: 3px;
        }
        .dots {
          width: 13px;
          height: 13px;
          border-radius: 50%;
          background-color: #fff;
          border: 2px solid #d9dce2;
        }
        .activied {
          background-color: #fff;
          border: 2px solid #d9dce2;
          width: 13px;
          height: 13px;
        }
      }
      .process-name {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 22px;
      }
      .process-explain {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
        line-height: 22px;
        margin-left: 6px;
      }
      .process-container {
        background: #f7f7f7;
        border-radius: 4px;
        padding: 0px 6px;
        margin-bottom: 10px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        color: #333333;
        line-height: 36px;
        word-break: break-all;
        .flex();
        align-items: center;
        justify-content: space-between;
        .file-name {
          height: 100%;
          width: 100%;
          flex: 1;
          overflow: hidden;
          display: flex;
          .file-name-text {
            flex: 1;
            width: 100%;
            line-height: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        .size-color {
          color: #999999;
        }
      }
      .file-download-list:hover {
        cursor: pointer;
        .size-color {
          color: var(--primary-color);
        }
        color: var(--primary-color);
        .file-name-text {
          text-decoration: underline;
        }
        .download-icon {
          cursor: pointer;
          color: var(--primary-color);
          margin-left: 8px;
        }
      }
      .process-image {
        margin-left: 20px;
        width: 86px;
        height: 68px;
        object-fit: contain;
      }
    }

    /deep/.ant-form-item {
      display: flex;
      .ant-form-item-label {
        width: 170px;
        white-space: pre-wrap;
        display: flex;
        justify-content: flex-end;
        line-height: 20px;
        align-items: center;
        height: 36px;
        label {
          color: #999999;
        }
      }
      .check-item-select {
        height: 126px;
        .ant-select-selection__rendered {
          height: 126px;
          .ant-select-selection__placeholder {
            margin-top: -40px !important;
          }
        }
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .form-content {
      padding: 0 148px 0 0;
      .modal-footer {
        padding: 18px 0;
        text-align: center;
        border-top: 2px solid #f3f4f6;
      }
    }
  }
}
</style>
